iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 1
0
Modern Web

JavaScript專案學習筆記系列 第 1

JavaScript專案學習筆記 -鍵盤監聽 1/30天

  • 分享至 

  • xImage
  •  

感謝https://javascript30.com/的免費教程

Demo:http://codepen.io/FutureFronterAndy/pen/VmByjZ
1
JavaScript Drum Kit
2
CSS + JS Clock
3
Playing with CSS Variables and JS
4
Array Cardio Day 1
5
Flex Panels Image Gallery
6
Ajax Type Ahead
7
Array Cardio Day 2
8
Fun with HTML5 Canvas
9
14 Must Know Dev Tools Tricks
10
Hold Shift to Check Multiple Checkboxes
11
Custom HTML5 Video Player
12
Key Sequence Detection (KONAMI CODE)
13
Slide In on Scroll
14
Object and Arrays - Reference VS Copy
15
LocalStorage and Event Delegation
16
CSS Text Shadow Mouse Move Effect
17
Sorting Band Names without articles
18
Tally String Times with Reduce
19
Unreal Webcam Fun
20
Native Speech Recognition
21
Geolocation based Speedometer and Compass
22
Follow Along Links
23
Speech Synthesis
24
Sticky Nav
25
Event Capture, Propagation, Bubbling and Once
26
Stripe Follow Along Dropdown
27
Click and Drag to Scroll
28
Video Speed Controller UI
29
Countdown Clock
30
Whack A Mole Game

學習點:

[javascript]

<strong>window.addEventListener('keydown',function(e) {</strong>
<strong> /* Act on the event */</strong>
<strong> const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);</strong>
<strong> const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);</strong>

<strong> if(!audio)return;</strong>
<strong> audio.currentTime=0;</strong>
<strong> key.classList.add('playing');</strong>
<strong> audio.play();</strong>

<strong> });</strong>

<strong>[/javascript]

關於backtick "`"(ES6 only):http://eslint.org/docs/rules/quotes, http://stackoverflow.com/questions/27678052/what-is-the-usage-of-the-backtick-symbol-in-javascript

*幫助留住換行

[javascript]
<strong>function removeTransition(e){</strong>
<strong> if(e.propertyName!="transform")return;</strong>
<strong> this.classList.remove('playing');</strong>
<strong> }</strong>
<strong> const keys =document.querySelectorAll('.key');</strong>
<strong> keys.forEach(key => key.addEventListener('transitionend',removeTransition));</strong>

<strong>[/javascript]

關於transitionend:http://www.w3schools.com/jsref/event_transitionend.asp

*控制CSS Transition動畫,在動畫結束後觸發


下一篇
JavaScript專案學習筆記 -時鐘 2/30天
系列文
JavaScript專案學習筆記7
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言